<template>
  <!-- 正交相机 -->
  <div>
    <div class="btn-box">
      <el-button> </el-button>
    </div>
    <!-- 创建三维场景，可通过鼠标缩放与移动方块 -->
    <div id="scene"></div>
  </div>
</template>

<script>
import * as THREE from "three";

let scene; //场景
let camera; //相机
let renderer; //创建渲染器
export default {
  name: "Scene",
  data() {
    return {};
  },
  mounted() {
    this.createScene();
    this.createMesh();
    this.createLight();
    this.createCamera();
    this.createRender();
    this.render();
  },
  methods: {
    createScene() {
      //创建场景
      scene = new THREE.Scene();
    },
    // 创建网格模型
    createMesh() {
      // 创建一个立方体几何对象Geometry
      const geometry = new THREE.BoxGeometry(120, 120, 120);
      // 材质对象Material
      const material = new THREE.MeshLambertMaterial({
        color: 0xe1e1e1,
      });
      // 网格模型对象Mesh
      let mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);
    },
    createLight() {
      // 点光源
      const point = new THREE.PointLight(0xffffff);
      // 点光源位置
      point.position.set(400, 200, 300);
      // 点光源添加到场景
      scene.add(point);

      // 环境光
      const ambient = new THREE.AmbientLight(0x666666);
      scene.add(ambient);
    },
    createCamera() {
      const element = document.getElementById("scene");
      const width = element.clientWidth;
      const height = element.clientHeight;
      const k = width / height; //窗口宽高比
      const s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
      /**
       * 在这种投影模式下，无论物体距离相机距离远或者近，在最终渲染的图片中物体的大小都保持不变。
       *  var camera = new THREE.OrthographicCamera( left,right,top,bottom,near,far)
       *  @param {number} left 左边界：可渲染部分的左边界
       *  @param {number} right	右边界：可渲染部分的右边界
       *  @param {number} top	上边界：可渲染部分的上边界
       *  @param {number} bottom	下边界：可渲染部分的下边界
       *  @param {number} near	近面：基于相机位置，表示从这里开始渲染场景；一般会设置一个很小的值，默认值0.1
       *  @param {number} far	远面：基于相机位置，表示停止渲染的位置；要注意设置合适的距离，保证场景全部可见，默认值1000
       * */
      camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
      camera.position.set(200, 300, 200); // 设置相机位置
      camera.lookAt(scene.position); //设置相机方向
      scene.add(camera);
    },
    // 创建渲染器
    createRender() {
      const element = document.getElementById("scene");
      renderer = new THREE.WebGLRenderer();
      // 设置渲染区域尺寸
      renderer.setSize(element.clientWidth, element.clientHeight);
      // 设置背景色
      renderer.setClearColor(0x3f3f3f, 1);
      element.appendChild(renderer.domElement);
    },
    render() {
      renderer.render(scene, camera);
      // 通过requestAnimationFrame实现周期性调用render
      requestAnimationFrame(this.render);
    },
  },
};
</script>

<style scoped lang="less">
#scene {
  width: 100vw;
  height: 100vh;
  z-index: 2;
  position: absolute;
  top: 0%;
}
</style>
